<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/images/xiao-tao-logo.png" alt="Logo" />
    </div>

    <div class="search-container">
      <el-input placeholder="搜索内容" v-model="searchText" class="search-input">
        <template #suffix>
          <el-icon class="search-icon"><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <div class="icons">
      <el-icon><Comment /></el-icon>
      <el-icon><Share /></el-icon>
      <el-icon><Link /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
  // Header一般组件 用来显示首页Home的Header头部
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { Comment, Share, Link, Search } from '@element-plus/icons-vue'

  const searchText = ref('')
  const router = useRouter()

  // const goToLogin = () => {
  //   router.push('/login')
  // }
</script>

<style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid #e4e4e4;
  }

  .logo img {
    height: 60px;
    transition: transform 0.3s ease;
  }

  /* 搜索容器 */
  .search-container {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 20px;
  }

  .search-input .el-input__inner {
    border-radius: 25px;
    padding-right: 40px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .search-input:focus-within .search-icon,
  .search-input:hover .search-icon {
    transform: scale(1.3);
    color: #409eff;
  }

  /* 图标区域 */
  .icons {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .icons .el-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .icons .el-icon:hover {
    transform: scale(1.2) rotate(5deg);
    background: #409eff;
    color: #fff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
</style>
